<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title> CRUD</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="${ctx}/js/gpoint/rdp/zone/css/metroStyle/metroStyle.css">
</head>

<body>
<!-- <h1>Metro 风格</h1> -->
<ul id="treeDemo" class="ztree"></ul>

<button onclick="getzTreeCheckIds()">选定区域</button>
<br>
<!-- <button onclick="initzTreeCheck()">测试初始化设置选中</button>

<button onclick="openDialog()">弹出框</button> -->

</body>
<script src="${ctx}/js/gpoint/rdp/zone/jquery-1.4.4.min.js"></script>
<script src="${ctx}/js/gpoint/rdp/zone/jquery.ztree.all.js"></script>
<script src="${ctx}/js/gpoint/rdp/zone/jquery.ztree.all.min.js"></script>
<script src="${ctx}/js/gpoint/rdp/zone/jquery.ztree.core.js"></script>
<script src="${ctx}/js/gpoint/rdp/zone/jquery.ztree.core.min.js"></script>
<script src="${ctx}/js/gpoint/rdp/zone/jquery.ztree.excheck.js"></script>
<script src="${ctx}/js/gpoint/rdp/zone/jquery.ztree.excheck.min.js"></script>
<script src="${ctx}/js/gpoint/rdp/zone/jquery.ztree.exedit.js"></script>
<script src="${ctx}/js/gpoint/rdp/zone/jquery.ztree.exedit.min.js"></script>
<script src="${ctx}/js/gpoint/rdp/zone/jquery.ztree.exhide.js"></script>
<script src="${ctx}/js/gpoint/rdp/zone/jquery.ztree.exhide.min.js"></script>

<script type="text/javascript">
    /** ------------------------------------------------------------------------------------------- tree 功能开始 */
         var zTreeSetting = {
        view: {
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom,
            selectedMulti: false
        },
        check: {
            enable: true // 开启复选框
        },
        data: {
            simpleData: {
                enable: true // 开启简单数据
            }
        },
        edit: {
            enable: true // 开启编辑
        },
        callback: {
            beforeRemove: zTreeBeforeRemove,
            onRemove: zTreeOnRemove,
            onRename: zTreeOnRename,
           
        }
    };

    
      var zNodes=null;
         $.ajax({
        	    url: "http://127.0.0.1:8083/rdp/zone/doorZone/getTreeData",
        	    async: false,//使用同步操作，否则init方法执行时setting可能还未被赋值
        	   success: function(data) {
        	   zNodes=data;
        	  }
        	 });
        	
    
    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), zTreeSetting, zNodes);
    });

  
    function addHoverDom(treeId, treeNode) {
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='add node' οnfοcus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#addBtn_" + treeNode.tId);
        if (btn) btn.bind("click", function () {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            // 新增节点Dom
            var newCount = guid();
            //console.log(JSON.stringify({id: (100 + newCount), pId: treeNode.id, name: "new node" + (newCount++)}));
            $.ajax({
            	type: "post",
          	    url: "http://127.0.0.1:8083/rdp/zone/doorZone/save",
          	    contentType: "application/json;charset=utf-8;",
          	    data:JSON.stringify({id: newCount, pId: treeNode.id, name: "new node" }),
          	    dataType:"json",//注意不是datatype哦
          	    async: false,//使用同步操作，否则init方法执行时setting可能还未被赋值
          	   success: function(data) {
          	   zNodes=data;
           	   zTree.addNodes(treeNode, {id: newCount, pId: treeNode.id, name: "new node"   }   );
           	 //  zTree.addNodes(treeNode,new node(guid,treeNode.id,"new node" + (newCount),guid )    );
          	  }
          	 });
           
           
            
            
        }); 
    }

  /*   function node(id,pId,name,tid){
    	this.id=id;
    	this.pId=pId;
    	this.name=name;
    	this.tid=tid;
    } */
    /** ----------------------------------------------- 删除 */
    // 删除节点之前
    function zTreeBeforeRemove(treeId, treeNode) {
        return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
    }

    // 删除节点DOM
    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_" + treeNode.tId).unbind().remove();
    };

    // 删除节点
    function zTreeOnRemove(event, treeId, treeNode) {
        // todo 发送请求
        alert("删除节点" + treeNode.id + ", " + treeNode.name);
        
        $.ajax({
      	    url: "http://127.0.0.1:8083/rdp/zone/doorZone/remove?id="+treeNode.id,
      	    async: false,//使用同步操作，否则init方法执行时setting可能还未被赋值
      	   success: function(data) {
      	   zNodes=data;
      	  }
      	 });
         
    }

    /** ----------------------------------------------- 编辑 */
    // 编辑节点
    function zTreeOnRename(event, treeId, treeNode, isCancel) {
        alert(treeNode.id + ", " + treeNode.name);
        
        $.ajax({
     	    url: "http://127.0.0.1:8083/rdp/zone/doorZone/edit?id="+treeNode.id+"&name="+treeNode.name,
     	    async: false,//使用同步操作，否则init方法执行时setting可能还未被赋值
     	   success: function(data) {
     	   zNodes=data;
     	  }
     	 });
        
      

        
    }

    
    function guid() {
        function S4() {
           return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
        }
        return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
    }
    
    
    /** ----------------------------------------------- 保存 */
    // 获得所有选中的节点
    function getzTreeCheckIds() {
    	
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = zTree.getCheckedNodes(true);
       
        var arrIds = new Array();
    
        for (var i = 0; i < nodes.length; i++) {
            arrIds.push(nodes[i].name);
        }
        alert(arrIds.toString());
        window.opener.document.getElementById("m:doorController:zoneid").value=arrIds.toString();
        return arrIds.toString();
    }

    // 初始化选中的节点
    function initzTreeCheck() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var node = zTree.getNodes(); // 可以获取所有的父节点
        var nodes = zTree.transformToArray(node); // 获取树所有节点
        for (var i = 0; i < nodes.length; i++) {
            var node = zTree.getNodeByParam("id", nodes[i].id);
            node.checked = true;
            zTree.updateNode(node);
        }
    }

    
    function openDialog(){
    	
		  var iwidth = 1000;
		  var iheight = 500;
		  var itop = (window.screen.availHeight-iheight)/2;       //获得窗口的垂直位置;
		  var ileft = (window.screen.availWidth-iwidth)/2;      //获得窗口的水平位置; 		   		   
		  win = window.open(
				"http://127.0.0.1:8083/rdp/zone/doorZone/list2.htm", 
				"区域管理", 
				"status=no,location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,top="+itop+",left="+ileft+",width="+iwidth+",height="+iheight
		   );   
	   }

    
    /** ------------------------------------------------------------------------------------------- tree 功能开始 */
</script>
</html>
